<template>
    <div class="row">
        <div class="settings-widget">
            <div class="settings-inner-blk p-0">
                <div class="sell-course-head comman-space">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <h3>我的客户</h3>
                            <p>您累积服务客户：{{ total }}，正在服务的客户：12</p>
                        </div>
                        <div class="ticket-btn-grp">
                            <!-- <nuxt-link to="/admin/custom-add" class="btn btn-primary">
                            创建客户
                        </nuxt-link> -->
                            <a href="#" data-bs-toggle="modal" data-bs-target="#addcustom">创建客户</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-12">
            <div class="showing-list">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="d-flex align-items-center">
                            <div class="view-icons">
                                <a href="students-grid.html" class="grid-view active"><i class="feather-grid"></i></a>
                                <a href="students-list.html" class="list-view"><i class="feather-list"></i></a>
                            </div>
                            <div class="show-result">
                                <h4>显示 {{ total }} 中的 {{ 1 + (params.pageIndex - 1) * 10 }} ~ {{
                                    (params.pageIndex - 1) *params.pageSize + list.length}} </h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-3 col-md-6 d-flex" v-for="(item, index) in list" :key="index">
                    <div class="student-box flex-fill">
                        <div class="student-img">
                            <img class="img-fluid" alt="Students Info" src="assets/img/user/user1.jpg">
                        </div>
                        <div class="student-content pb-0">
                            <h5>
                                <nuxt-link :to="'/admin/custom-detail?id=' + item.id">
                                    {{ item.title }}
                                </nuxt-link>

                            </h5>
                            <h6>{{ item.telephone }}</h6>

                        </div>
                    </div>
                </div>
            </div>

            <app-pagination :total="total" :current="params.pageIndex" @pageChange="pageChange" />

        </div>
    </div>

    <div class="modal-styles modal fade" id="addcustom" tabindex="-1" aria-labelledby="addcustom" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">入驻客户</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><i
                            class="fa-regular fa-circle-xmark"></i></button>
                </div>
                <div class="modal-body">
                    <div class="addpaymethod-form add-course-info">
                        <form action="#">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label class="form-control-label">客户名称</label>
                                        <input type="text" v-model="formData.title" class="form-control"
                                            placeholder="请输入用户名">
                                    </div>
                                    <div class="form-group">
                                        <label class="form-control-label">位置</label>
                                        <input type="text" v-model="formData.name" class="form-control"
                                            placeholder="用于登录">
                                    </div>
                                    <!-- <div class="form-group">
                                        <label class="form-control-label">手机号</label>
                                        <input type="text" v-model="formData.telephone" class="form-control" placeholder="请输入手机号">
                                    </div> -->
                                    <div class="form-group">
                                        <label class="form-control-label">类型</label>

                                        <div class="wallet-method">
                                            <label class="radio-inline custom_radio me-4">
                                                <input type="radio" name="optradio" v-model="formData.type"
                                                    value="training">
                                                <span class="checkmark"></span> 培训结构
                                            </label>
                                            <label class="radio-inline custom_radio me-4">
                                                <input type="radio" name="optradio" v-model="formData.type"
                                                    value="school">
                                                <span class="checkmark"></span> 学校
                                            </label>
                                            <label class="radio-inline custom_radio">
                                                <input type="radio" name="optradio" v-model="formData.type"
                                                    value="studio">
                                                <span class="checkmark"></span> 个人工作室
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="form-control-label">有效期</label>
                                        <input type="text" class="form-control" v-model="formData.endAt"
                                            placeholder="有效期">
                                    </div>
                                </div>
                                <!-- <div class="col-lg-4">
                                    <div class="form-group">
                                        <label class="form-label">Month</label>
                                        <select class="form-select select" name="sellist1">
                                            <option>Month</option>
                                            <option>Brazil</option>
                                            <option>French</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label class="form-label">Year</label>
                                        <select class="form-select select" name="sellist1">
                                            <option>Year</option>
                                            <option>India</option>
                                            <option>America</option>
                                            <option>London</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label class="form-control-label">CVV Code </label>
                                        <input type="text" class="form-control" placeholder="XXXX">
                                    </div>
                                </div> -->
                                <!-- <div class="col-lg-12">
                                    <div class="form-group mb-0">
                                        <label class="form-control-label">Name on Card</label>
                                        <input type="text" class="form-control" placeholder="Address">
                                    </div>
                                </div> -->
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer me-auto">
                    <button type="button" class="btn btn-modal-style btn-theme" @click="save">保存</button>
                    <button type="button" class="btn btn-modal-style btn-cancel" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
const list = ref([])
const total = ref(0)
const params = reactive({
    pageIndex: 1,
    pageSize: 10
})
const formData = reactive({
    title: '测试',
    telephone: '13612345678',
    type: 'training',
    endAt: '2025-01-01' // 截止时间

})

const save = async () => {
    await customApi.add(formData)
    $('#addcustom').modal('hide')
    search()
}
const pageChange = async (e) => {
    params.pageIndex = e
    await search()
}
const edit = (e) => {
    formData.title = e.title
    formData.telephone = e.telephone
    formData.type = e.type
    $('#addcustom').modal('show')
}
const del = async (e) => {
    await customApi.del(e)
    search()
    console.log(e)
}
const search = async () => {
    const res = await customApi.getList(params.pageIndex, params.pageSize)
    console.log(res)
    list.value = res.list
    total.value = res.pager.total

}
search()
// onMounted(async ()=> {
//     await nextTick();

// })
</script>